<template>
	<view class="xilu">
		<view class="container" style="padding-bottom: 30rpx;">

			<image class="m-backdrop" src="/static/icon/icon_bg1.png" mode="widthFix"></image>
			<view class="m-header">
				<image class="m-backdrop" src="/static/icon/icon_bg1.png" mode="widthFix"></image>
				<view class="g-custom-nav flex-box plr30"
					:style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<!-- <view class="message" :class="{active:messageCount>0}" @click="bindMessage()">
						<image src="/static/icon/icon_message.png" mode="aspectFit"></image>
						<view>消息</view>
					</view> -->
					<view class="search_box flex-box" style="width: 486rpx;">
						<!-- <view class="addr m-ellipsis" @click="bindCityChange()">{{currentCity?currentCity.name:''}}</view>
						<image class="icon_arrow" src="/static/icon/icon_arrow.png"></image>
						<view class="line"></view> -->
						<image class="icon_search" src="/static/icon/icon_search.png"></image>
						<input @click="bindSearch()" disabled="true" class="input flex-1" type="text" placeholder="搜索课程/活动" placeholder-class="cola" />
					</view>
				</view>
			</view>
			<view class="pr" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<view class="xilu_swiper">
					<swiper class="swiper" :current="swiperCurrent" circular @change="swiperChange">
						<swiper-item v-for="(item,index) in bannerList" :key="index">
							<view class="nav" :class="{'scale': swiperCurrent !==index}" @click="bannerjump(item.minapp_url)">
								<image :src="item.thumb_image_text" mode="aspectFill" class="img"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper_dots flex-box flex-center">
						<view class="dots" v-for="(item,index) in bannerList" :key="index" :class="{'active': swiperCurrent == index}">
						</view>
					</view>
				</view>

				<view class="plr40">
					<!-- 研学类目 -->
					<view class="xilu_menu" v-if="nav_state & navigationList.length > 0">
						<view class="category">
							<image src="/static/icon/category.png" mode=""></image>
							<text>研学类目</text>
						</view>
						<view class="item-tital">
							<view class="item"
							@click="navigation(index)" v-for="(item,index) in navigationList" :key="index">
								<view class="txt">{{item.name}}</view>
								<image :src="item.icon_text" mode="aspectFill"></image>
							</view>
						</view>
					</view>
                    <!-- 研学相册-->
					<view class="xilu_album">
					    <view class="total">
					    	<view class="category">
					    		<image src="/static/icon/album.png" mode=""></image>
					    		<text>研学相册</text>
					    	</view>
							<view class="more" @click="albumMore()">
								查看全部
							</view>
					    </view>
						
						<view class="album-total">
							<scroll-view scroll-x="true" >
								<view class="img-list">
									<view class="img-lists" v-for="(item,index) in Album_Img" :key="index" @click="doPreviewImage(index)">
										<image :src="item.image" mode="aspectFill"></image>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					
					<!-- <navigator class="xilu_banner" :url="adList[0].minapp_url" hover-class="none" v-if="adList.length>0">
						<image :src="adList[0].thumb_image_text" mode="aspectFill" style="border-radius: 8rpx;"></image>
					</navigator> -->

					<view class="xilu_title flex-box">
						<view class="flex-1 title">课程推荐</view>
						<navigator class="more" url="/pages/more_landscape/more_landscape" hover-class="none">更多+</navigator>
					</view>

					<view class="xilu_landscape">
						<navigator class="item" :url="'/pages/landscape_detail/landscape_detail?id='+item.id" hover-class="none" v-for="(item,index) in sceneryList">
							<image :src="item.thumb_image_text" mode="aspectFill">
							</image>
							<view class="name m-ellipsis mb10">{{item.name}}</view>
							<view class="col-price" v-if="item.project">
								<text class="fs28">¥</text>
								<text class="fs34">{{item.project.salesprice}}</text>
								<text class="fs28">起</text>
							</view>
						</navigator>
					</view>

					<!-- <view class="xilu_title flex-box">
						<view class="flex-1 title">线路推荐</view>
						<navigator class="more" url="/pages/popular_travel/popular_travel" hover-class="none">更多+</navigator>
					</view>

					<view class="g_travel_list">
						<tour-list :tourList="tourList"></tour-list>
						<view class="nothing" v-if="tourListMore.nothing">
							<image src="/static/icon/icon_nothing.png" mode="aspectFit"></image>
							<text>暂无内容</text>
						</view>
						<view class="g-btn3-wrap" v-else>
							<view class="g-btn3" @click="fetchTourList">{{tourListMore.text}}</view>
						</view>
					</view> -->

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tourList from '@/components/tour-list/tour-list.vue';
	export default {
		components: {
			tourList
		},
		data() {
			return {
				Album_Img:[{
					id:1,
					image:this.$IMG_URL + '/uploads/20240628/72ab957abd4820b4d1b98e28fde1fe23.jpg'
				},{
					id:2,
					image:this.$IMG_URL + '/uploads/20240628/6ebd2e73fc91f154f1f7573507e23562.jpg'
				},{
					id:3,
					image:this.$IMG_URL + '/uploads/20240628/05bdd49f7ab85c5c86ece732a0bcd836.jpg'
				},{
					id:4,
					image:this.$IMG_URL + '/uploads/20240628/94000001be5ca4f903fc30947a2569f6.jpg'
				},{
					id:5,
					image:this.$IMG_URL + '/uploads/20240628/6b6d85052813a9debc0a019ad071c076.jpg'
				},{
					id:6,
					image:this.$IMG_URL + '/uploads/20240628/096cbb6ab4cea572eef6919a49026d5f.jpg'
				}],
				statusBarHeight: 20,
				messageCount: 0,
				bannerList:[],
				adList:[],
				swiperCurrent: 0,
				navigationList:[],
				nav_state:false,
				sceneryList:[],
				tourList:[],
				tourListMore:{page:1},
				currentCity: null,
			};
		},
		onLoad() {
			this.statusBarHeight = getApp().globalData.statusBarHeight;
			this.refreshPage();
			let page = this;
			this.currentCity = this.$core.getCurrentCity();
			uni.$on(app.globalData.Event.CurrentCityChange, function(currentCity) {
				page.currentCity = currentCity;
				page.refreshPage();
			})
		},
		onShow() {
			if(this.$core.getUserinfo()){
				this.$util.getMessageCount(false).then(count=>{
					this.messageCount = count
				})
			}
		},
		onReachBottom() {
			this.fetchTourList()
		},
		onPullDownRefresh() {
			this.refreshPage();
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		onUnload() {
			uni.$off(app.globalData.Event.CurrentCityChange,this);
		},
		methods: {
			// 查看更多
			albumMore(){
				uni.navigateTo({
					url:'/pages/Stud_album/Stud_album'
				})
			},
			// 图片预览
			doPreviewImage(index){
				let imgaes = []
				for (var i = 0; i < this.Album_Img.length; i++) {
					imgaes.push(this.Album_Img[i].image)
				}
				uni.previewImage({
					current:index,
					urls:imgaes
				})
			},
			//更换城市
			bindCityChange(){
				uni.navigateTo({
				    url: '/pages/change_city/change_city'
				})
			},
			//搜索
			search() {
			    uni.navigateTo({
			        url: '/pages/search_result/search_result'
			    })
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			bindSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			refreshPage(){
				//轮播
				this.$core.get({url:'xilutour.banner/index',data:{group:'index'},loading:false,success:(ret)=>{
					this.bannerList = ret.data;
				 }});
				 
				 //中间图
				 this.$core.get({url:'xilutour.banner/index',data:{group:'index2'},loading:false,success:(ret)=>{
				 	this.adList = ret.data;
				  }});
				 
				//中间金刚区
				this.$core.get({url: 'xilutour.common/navication',data:{},loading:false,success:(ret)=>{
					this.navigationList = ret.data;
					this.nav_state = true
				}})
				
				//热门景点
				this.$core.get({url: 'xilutour.scenery/hot_list',data:{},loading:false,success:(ret)=>{
					this.sceneryList = ret.data;
				}})
				//线路推荐
				this.tourList = [];
				this.tourListMore = {page: 1};
				this.fetchTourList();
				uni.stopPullDownRefresh();
			},
			fetchTourList(){
				this.$util.fetch(this, 'xilutour.tour/recommend_list', {pagesize:10}, 'tourListMore', 'tourList', 'data', data=>{
				  
				})
			},
			//轮播图
			bannerjump(url){
				if(url.trim() == ''){
					return '';
				}
				uni.navigateTo({
					url: url
				})
			},
			//金刚区
			navigation(index){
				let item = this.navigationList[index];
				let url = ''
				if(item.module_type == 3){
					url = '/pages/article_list/article_list'
				}else if(item.module_type==2){
					url = '/pages/more_landscape/more_landscape';
				}else{
					url = '/pages/popular_travel/popular_travel';
				}
				if(item.module_type != 3){
					if(item.type==1){
						//标签
						url += '?tag_id='+item.type_value;
					}else if(item.type == 2){
						//分类
						url += '?category_id='+item.type_value
					}
				}
				if(url){
					if(url == '/pages/article_list/article_list'){
						uni.switchTab({
							url: url
						})
					}else{
						uni.navigateTo({
							url: url
						})
					}
					
				}
			},
			bindMessage(){
				uni.navigateTo({
					url: '/pages/my_message/my_message'
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.xilu {
		&_swiper {
			position: relative;
			padding: 30rpx 0 40rpx;
			.swiper {
				margin: auto;
				display: block;
				width: 686rpx;
				height: 320rpx;
				border-radius: 15rpx;
				overflow: hidden;
                swiper-item{
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.nav {
					position: relative;
					width: 686rpx;
					height: 320rpx;
				}

				// .nav.scale {
				// 	transform: scale(0.9);
				// }

				.img {
					margin: 0 auto;
					display: block;
					width: 686rpx;
					height: 320rpx;
				}
			}

			.swiper_dots {
				position: absolute;
				bottom: 50rpx;
				left: 0;
				right: 0;

				.dots {
					margin: 0 4rpx;
					width: 14rpx;
					height: 4rpx;
					background: #D8D8D8;
				}

				.dots.active {
					background: #333333;
				}
			}
		}
        &_album {
			padding: 28rpx;
			border-radius: 18rpx;
			margin: 0 0 32rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,66,128,0.12);
			.album-total{
				width: 100%;
				height: 150rpx;
				.img-list{
					display: flex;
					align-items: center;
					.img-lists{
						width: 150rpx;
						height: 150rpx;
						margin-right: 16rpx;
						image{
							width: 132rpx;
							height: 132rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
			.total{
				display: flex;
				justify-content: space-between;
				.category{
					display: flex;
					align-items: center;
					margin: 0 0 24rpx 0;
					image{
						width: 32rpx;
						height: 32rpx;
						margin: 0 10rpx 0 0;
					}
					text{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1A1A1A;
					}
				}
				.more{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1A1A1A;
				}
			}
		}
		
		&_menu {
			padding: 28rpx;
			border-radius: 18rpx;
			margin: 0 0 32rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,66,128,0.12);
			.category{
				display: flex;
				align-items: center;
				margin: 0 0 24rpx 0;
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx 0 0;
				}
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1A1A1A;
				}
			}
			.item-tital{
				flex-wrap: wrap;
				display: flex;
				.item:nth-child(2n){
					margin: 0 !important;
				}
				.item{
					padding: 24rpx 0 0 0;
					margin: 0 32rpx 0 0;
					border-radius: 24rpx;
					width: 47%;
					height: 260rpx;
					background: #f1e9d3;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					.txt{
						color: #e68f0d;
						font-size: 28rpx;
					}
					image {
						margin: 10rpx 0 0 0;
						display: block;
						width: 220rpx;
						height: 220rpx;
						border-radius: 32rpx;
					}
				}
			}
			
		}

		&_banner {
			margin: 0 0 25rpx;
           
			image {
				display: block;
				width: 670rpx;
				height: 198rpx;
			}
		}

		&_title {
			margin: 0 0 32rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #101010;
				line-height: 34rpx;
			}

			.more {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #898989;
				line-height: 28rpx;
			}
		}

		&_landscape {
			display: flex;
			flex-wrap: wrap;
			margin: 0 0 60rpx;
			.item:nth-child(2n){
				margin: 0 0 20rpx 0 !important;
			}
			.item {
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,66,128,0.12);
				border-radius: 20rpx;
				padding: 20rpx;
				margin: 0 25rpx 20rpx 0;
				display: flex;
				width: 320rpx;
				flex-direction: column;
				background: #FFFFFF;
				image {
					margin: 0 0 20rpx;
					display: block;
					width: 280rpx;
					height: 280rpx;
					border-radius: 20rpx;
				}

				.name {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #101010;
					line-height: 38rpx;
				}
			}
		}
	}
</style>